#home-page {
  width: 100%;
  height: 100%;
  .home_page {
    display: flex; flex-direction: column;
    height: calc(100vh - 95px);
    overflow: hidden;
    .page_top {
      background: #fff; padding: rem(30) rem(30) 0;
      .top_bar {
        color: #666666; position: relative;
        .serach {
          width:rem(616-94); height:rem(68); background:rgba(237,239,242,1); border-radius:rem(8); line-height: rem(68);
          padding-left: rem(96); font-size: rem(28); position: relative;
          &:after {
            content:  ''; display: block;
            height: rem(44); width: rem(44);
            background: url('https://mjmh.meijiameihuo.com/wechat/images/home/icon_search.png') no-repeat center;
            background-size: contain;
            position: absolute; left: rem(30); top: rem(12);
          }
        }
        .message_icon {
          width:rem(44);
          height:rem(44);
          background-size:contain;
          background-position:center;
          position:absolute;
          top:rem(12); right: 0;
          background-image:url('https://mjmh.meijiameihuo.com/wechat/images/home/icon_msg.png');
        }
      }
      .category {
        position: relative; padding-right: rem(54);
        >span {
          display: block; width: rem(44); height: rem(44);
          position: absolute; right: 0; top: rem(22); z-index: 101;
          background: url('https://mjmh.meijiameihuo.com/wechat/images/home/icon_down.png') center no-repeat;
          background-size: contain;
          -webkit-transition:-webkit-transform 0.5s;
          -moz-transition:-moz-transform 0.5s;
          -o-transition:-o-transform 0.5s;
          transition:transform 0.5s;
          &.show {
              display: block; width: rem(44); height: rem(44);
              position: absolute; right: 0; top: rem(22);
              background: url('https://mjmh.meijiameihuo.com/wechat/images/home/icon_down.png') center no-repeat;
              background-size: contain;
              animation:rotating 0.6s;
              transform:rotate(180deg);
              -webkit-transform-origin:50% 50%;
              transform-origin:50% 50%;
          }
        }
        .van-tabs {
          .van-tabs__nav {
            // display: block;
          }
        }
        .van-tab {
          display:inline-block;
        }
        .van-hairline--top-bottom {
          &:after {
            border-width: 0;
          }
        }
      }
      .cate_chaild {
        position: absolute;
        background: #fff; width: rem(750); left: rem(-30); top: 0;
        padding: rem(30) 0; z-index: 100;
        .chaild_list {
          background-color: #fff; position: absolute; z-index: 100;
          padding-bottom: rem(30);
          h3 {
            font-size:rem(28);
            padding:0 rem(30) rem(12) rem(30);
            font-weight:600;
          }
          span {
            font-size:rem(24);
            // border:1px solid #ccc;
            box-shadow:0px 0px 2px #ccc;
            width:rem(150);
            text-align:center; height:rem(50); line-height:rem(50); border-radius:rem(5); margin:rem(10) 0 rem(10) rem(30);
            background:#fafafa; overflow:hidden; text-overflow:ellipsis; white-space:pre-wrap;
            -webkit-box-orient:vertical; display:-webkit-inline-box; -webkit-line-clamp:1; vertical-align:middle;
            &.red {
              box-shadow:0px 0px 2px #E91F3F; color: #E91F3F;
            }
          }
        }
        .mask {
          position: absolute; width: rem(750);
          height: 100vh; background: rgba(0, 0, 0, .6); top: rem(30);
        }
      }
    }
    .page_main {
      overflow-y: scroll;
      -webkit-overflow-scrolling: touch;
      .index_list {
        background: #fff; margin-top: rem(30);
      }
    }
  }
}
// #home-page {
// }
